<template>
	<view class="uni-tabbar">
		<view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
			<view class="uni-tabbar__icon">
				<image v-if="item.pagePath == pagePath" class="uni-tabbar__img" :src="item.selectedIconPath" />
				<image v-else class="uni-tabbar__img" :src="item.iconPath" />
			</view>
			<view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			pagePath: null,
			factory_id: null,
			activity_id: null,
			staff_id: null
		},
		data() {
			return {
				page: 'contact',
				// showPage: false,
				// containerHeight: 400,
				tabbar: [{
						"pagePath": "/pages/staff/invitation",
						"iconPath": "/static/index1.png",
						"selectedIconPath": "/static/index.png",
						"text": "邀约客户",
					}, {
						"pagePath": "/pages/staff/staff_joinactivitylist",
						"iconPath": "/static/act.png",
						"selectedIconPath": "/static/act1.png",
						"text": "报名的活动",
					}, {
						"pagePath": "/pages/staff/staff_my",
						"iconPath": "/static/me1.png",
						"selectedIconPath": "/static/me.png",
						"text": "员工信息",
					}
				],
			};
		},
		methods: {
			changeTab(item) {
				this.page = item.pagePath + 
				'?activity_id=' + 
				this.activity_id + 
				'&factory_id=' + 
				this.factory_id + 
				'&staff_id=' + 
				this.staff_id
					uni.reLaunch({
						url: this.page
					});
				// uni.getStorage({
				// 	key:'activity_id',
				// 	success:(res)=>{
				// 		// console.log(res.data)
				// 		this.activity_id = res.data
				// 		// console.log(item.pagePath,this.activity_id)
				// 		this.page = item.pagePath + '?activity_id=' + this.activity_id
				// 		// this.page = item.pagePath
				// 		uni.navigateTo({
				// 			url: this.page
				// 		});
				// 	}
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/main.css';
	@import  '@/common/zcm-main.css';
	
	[nvue] uni-scroll-view,
	[nvue] uni-swiper-item,
	[nvue] uni-view {
		flex-direction: unset;
	}

	[nvue-dir-column] uni-swiper-item,
	[nvue-dir-column] uni-view {
		flex-direction: unset;
	}

	.uni-tabbar {
		position: fixed;
		bottom: 0;
		z-index: 99;
		width: 100%;
		display: flex;
		justify-content: space-around;
		height: 98rpx;
		padding: 10rpx 0;
		box-sizing: border-box;
		border-top: solid 1rpx #ccc;
		background-color: #fff;
		box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);

		.uni-tabbar__item {
			display: block;
			line-height: 24rpx;
			font-size: 20rpx;
			text-align: center;
		}

		.uni-tabbar__icon {
			height: 55rpx;
			line-height: 55rpx;
			text-align: center;
		}
		
		.uni-tabbar__img {
			height: 55rpx;
			width: 55rpx;
		}
		
		.icon {
			display: inline-block;
		}

		.uni-tabbar__label {
			position: relative;
			bottom: -5rpx;
			line-height: 22rpx;
			font-size: 22rpx;
			color: #999;

			&.active {
				color: #475dfc;
			}
		}
	}
</style>
